<!-- 柱状图 -->
<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "250px",
    },
    dataZoom: {
      type: Boolean,
      default: false,
    },
    dataZoomNumber: {
      type: Number,
      default: 99,
    },
    legend: {
      type: Object,
      default() {
        return {
          show: false,
          left: 'center',
          bottom: '0',
        }
      }
    },
    grid: {
      type: Object,
      default() {
        return {
          top: "13%",
          bottom: "0",
          left: "5%",
          right: "5%",
        }
      }
    },
    data: {
      type: Object,
      default() {
        return {
          xAxis: ["区域一", "区域二", "区域三", "区域四"],
          yAxis: {
            name: '单位：次'
          },
          barWidth: "18%",
          barGap: "60%",
          series: [
            {
              name: "运行中",
              data: [250, 150, 170, 150],
              color: ["#0cbaec", "#037ede", "#8b74ff"],
            },
            {
              name: "维护中",
              data: [300, 210, 220, 210],
              color: ["#f0d561", "#f7bc33", "#ffa301"],
            },
            {
              name: "异常",
              data: [250, 240, 190, 260],
              color: ["#feb7d4", "#fa2961", "#fa2961"],
            },
          ],
        };
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    setTimeout(() => {
			this.initChart()
		}, 20)
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
  },
  watch: {
    data(newData, oldData) {
      this.initChart();
    },
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el);

      let legendArray =[]
      for(let x in this.data.series){
          legendArray.push(this.data.series[x].name)
      }

      let series = [];

      for (let x in this.data.series) {
        if(this.data.series[x].type == 'bar') {
          series.push({
            name: this.data.series[x].name,
            type: "bar",
            barWidth: this.data.barWidth,
            barGap: this.data.barGap,
            data: this.data.series[x].data,
            itemStyle: {
              normal: {
                shadowBlur: 0,
                shadowColor: this.data.series[x].color[0],
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: this.data.series[x].color[0],
                    },
                    {
                      offset: 1,
                      color: this.data.series[x].color[1],
                    },
                  ],
                  false
                ),
              },
            },
          });
        } else if (this.data.series[x].type == 'line') {
          series.push({
            name: this.data.series[x].name,
            type: 'line',
            smooth: true,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: this.data.series[x].color[0]
                },
                {
                  offset: 1,
                  color: 'rgba(98, 227, 255, 0)'
                }
              ])
            },
            data: this.data.series[x].data,
            symbol: 'circle',
            symbolSize: 0,
            itemStyle: {
              normal: {
                color: this.data.series[x].color[0],
                borderColor: this.data.series[x].color[0],
                lineStyle: {
                  color: this.data.series[x].color[0]
                }
              }
            }
          })
        }
        
      }

      let option = {
        legend: {
          show: this.legend.show,
          icon: 'rect',
          itemGap: 13,
          data: legendArray,
          left: this.legend.left,
          bottom: this.legend.bottom,
          itemWidth: 6,
          itemHeight: 20,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          textStyle: {
            color: "#222",
          },
          backgroundColor: "rgba(255,255,255,0.9)",
          borderColor: "#e2e7ec",
          borderWidth: 1,
        },
        grid: {
          top: this.grid.top,
          bottom: this.grid.bottom,
          left: this.grid.left,
          right: this.grid.right,
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.data.xAxis,
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#fff",
                fontSize: 12,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#7fa6f4",
              },
            },
          },
        ],
        yAxis: [
          {
            name: this.data.yAxis.name,
            nameTextStyle:{
                color:"#fff", 
                fontSize:12,  
            },
            type: "value",
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 12,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#7fa6f4",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#7fa6f4",
                type: "solid",
              },
            },
          },
        ],
        dataZoom: [
          {
            show: this.dataZoom,
            height: 12,
            xAxisIndex: [0],
            bottom: "8%",
            startValue: 0,
            endValue: this.dataZoomNumber,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#444",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        series: series,
      }
      this.chart.setOption(option);

      let this_ = this;

      var faultByHourIndex = 0; //播放所在下标
      this.faultByHourTime = setInterval(function () {

        // 重新将柱状图还原回开始的状态
        if (faultByHourIndex === 0) {
          option.dataZoom[0].startValue = 0;
          option.dataZoom[0].endValue = this_.dataZoomNumber;
          this_.chart.setOption(option);
        }
        // 柱状图向后移动一个位置
        if (faultByHourIndex >= (this_.dataZoomNumber + 1)) {
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
          this_.chart.setOption(option);
        }

        //使得tootip每隔三秒自动显示
        this_.chart.dispatchAction({
          type: "showTip", // 根据 tooltip 的配置项显示提示框。
          seriesIndex: 0,
          dataIndex: faultByHourIndex,
        });
        faultByHourIndex++;
        // faultRateOption.series[0].data.length 是已报名纵坐标数据的长度
        if (faultByHourIndex >= this_.data.xAxis.length) {
          faultByHourIndex = 0;
        }
      }, 3000);
      window.addEventListener("resize", () => {
        this.chart.resize();
      });
    },
  },
};
</script>